html
    head
        title Mockup Gallery
        link(rel="stylesheet" type="text/css" href="style.css")
    body
        #bound-box
            -
                var length = 21,
                    row = 3,
                    mockup_screen = {
                        width: 360,
                        height: 640
                    },
                    cal_gallery = {
                        width: mockup_screen.width * length/row,
                        height: mockup_screen.height * row
                    },
                    gallery_width = "width:" + cal_gallery.width + "px",
                    gallery_height = "height:" + cal_gallery.height + "px";
            -
            #gallery(
                style = gallery_width + ";" + gallery_height
            )
                - for (var x = 0; x < length; x++)
                    .image-box
                        .image(
                            style = "width:" + mockup_screen.width + "px; height:" + mockup_screen.height + "px;background-image:url(images/"+ x +'.png)'
                            )
                -
    script(src="main.js")